<template>
    <div class="business">
        <!-- 测量但 -->
        <el-form :model="businessForm" label-width="auto" :rules="rules" ref="ruleFormRef">
            <div class="business-form">
                <h4> <i class="iconfont icon-zuojiantou" @click="goBack"></i>测量单</h4>
                <div class="form-box">
                    <el-form-item label="客户名称" prop="customerName" required>
                        <el-select v-model="businessForm.customerName" placeholder="请输入客户名称" filterable
                            @change="customerChange">
                            <el-option v-for="item in customerList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>

                    </el-form-item>
                    <el-form-item label="终端名称" prop="terminalName" required>
                        <el-input v-model="businessForm.terminalName" placeholder="请输入终端名称" />
                    </el-form-item>

                    <el-form-item label="终端电话" class="terminalPhone" prop="terminalPhone" required>
                        <p>+86</p>
                        <el-input v-model="businessForm.terminalPhone" placeholder="请输入11位手机号码" />
                    </el-form-item>
                    <el-form-item label="厂家负责人" prop="manufacturerContact" required>
                        <el-input v-model="businessForm.manufacturerContact" placeholder="请输入厂家负责人" />
                    </el-form-item>
                    <el-form-item label="经营测量人员" prop="businessSurveyor" required @click="openSelectUser">
                        <el-input v-model="businessForm.businessSurveyorName" placeholder="请选择测量人员" disabled style="pointer-events:none" />
                    </el-form-item>


                    <el-form-item label="设计元素" prop="designElements" required>
                        <el-input v-model="businessForm.designElements" placeholder="请选择设计元素" />
                    </el-form-item>
                    <el-form-item label="城管报备情况" prop="urbanManagementReport">
                        <el-select placeholder="请选择城管报备情况" v-model="businessForm.urbanManagementReport" clearable>
                            <el-option v-for="item in urbanManagementReportList" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="测量日期" prop="surveyDate" required>
                        <el-date-picker v-model="businessForm.surveyDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                            placeholder="请选择测量日期" />
                    </el-form-item>


                  <el-form-item label="下单类别" prop="mtype" required>
                    <el-select v-model="businessForm.mtype" placeholder="请选择下单类别">
                      <el-option label="物料类" value="物料类" />
                      <el-option label="其他类" value="其他类" />
                    </el-select>
                  </el-form-item>


                    <el-form-item label="店面现场环境" class="shopEnvironment" prop="shopEnvironment">
                        <p class="shopEnvironmentLable">门头离地高度</p>
                        <el-input v-model="businessForm.shopEnvironment" placeholder="请输入" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="主线到招牌距离" class="config" prop="mainLineDistance">
                        <el-input v-model="businessForm.mainLineDistance" placeholder="请输入主线到招牌距离" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item class="shopRadio" label="店面情况">
                        <el-radio-group v-model="businessForm.shopRadio">
                            <el-radio value="1" label="1">新开店</el-radio>
                            <el-radio value="2" label="2">已有店面改造</el-radio>
                            <el-radio value="3" label="3">其他</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="店面情况-其他" prop="other" v-show="businessForm.shopRadio == '3'">
                        <el-input v-model="businessForm.other" placeholder="请输入" />
                    </el-form-item>
                  <el-form-item label="详细地址" prop="detailedAddress">
                    <el-input type="textarea"  v-model="businessForm.detailedAddress" placeholder="请输入详细地址" />
                  </el-form-item>

                </div>
            </div>
            <div class="structuralDiagram">
                <div class="title">
                    <h4>现场平面结构图</h4>
                    <span>需注明具体材质与尺寸</span>
                </div>
                <div class="form-box">
                    <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '固定-单片'">
                        <el-input v-model="businessForm.frontHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-单片'">
                        <el-input v-model="businessForm.frontWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.frontHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.frontWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                        v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.waterproofHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.waterproofWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.leftHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.leftWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.rightHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.rightWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.bottomHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                        <el-input v-model="businessForm.bottomWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                        v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.waterproofHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                        v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.waterproofWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.doorHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.doorWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.frontHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.frontWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.bottomHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.bottomWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.leftHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.leftWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.rightHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.rightWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                        v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.columnOneHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                        v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.columnOneWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                        v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.columnThreeHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                        v-show="optionModel == '固定-四周厚度+两个包柱'">
                        <el-input v-model="businessForm.columnThreeWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.waterproofHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.waterproofWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.doorHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.doorWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.frontHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.frontWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.bottomHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.bottomWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.leftHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.leftWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.rightHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.rightWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.columnOneHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.columnOneWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                        v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.columnTwoHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth" v-show="optionModel == '多选-门头含包柱'">
                        <el-input v-model="businessForm.columnTwoWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.waterproofHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.waterproofWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.doorHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.doorWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗玻璃高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗玻璃宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗上宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowTopWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗上高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowTopHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗左宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowLeftWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗左高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowLeftHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗右宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowRightWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗右高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowRightHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗下宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowBottomWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="橱窗下高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.windowBottomHeight" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.frontHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.frontWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.bottomHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.bottomWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.leftHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.leftWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.rightHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.rightWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.columnOneHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.columnOneWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                        v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.columnTwoHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.columnTwoWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                        v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.columnThreeHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth" v-show="optionModel == '多选-门头含橱窗'">
                        <el-input v-model="businessForm.columnThreeWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.waterproofHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.waterproofWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.doorHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.doorWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.frontHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.frontWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.bottomHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.bottomWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.leftHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.leftWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.rightHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.rightWidth" />
                        <p class="unit">m</p>
                    </el-form-item>

                    <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnOneHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnOneWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnTwoHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnTwoWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnThreeHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnThreeWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱四高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnFourHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱四宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnFourWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱五高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnFiveHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱五宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnFiveWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱六高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnSixHeight" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <el-form-item label="包柱六宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                        <el-input v-model="businessForm.columnSixWidth" />
                        <p class="unit">m</p>
                    </el-form-item>
                    <div class="optionModel">

                        <el-form-item label="选取模板" class="config">
                            <el-select v-model="optionModel">
                                <el-option v-for="item in optionModelList" :key="item.id" :label="item.imageName"
                                    :value="item.imageName" />
                            </el-select>
                        </el-form-item>

                        <div class="modleimage">
                            <el-image :src="optionModelUrl" lazy />

                            <!-- 固定 1 -->
                            <!-- 选择1固定图片的正面数据宽度 -->
                            <div v-show="optionModel == '固定-单片'">
                                <span class="guding-one-zhengmianW">{{ businessForm.frontWidth }}</span>
                                <!-- 选择1固定图片的正面数据高度 -->
                                <span class="guding-one-zhengmianH">{{ businessForm.frontHeight }}</span>
                            </div>

                            <!-- 固定 2-->
                            <div v-show="optionModel == '固定-四周厚度无包柱'">
                                <span class="guding-two-fangshuiW">{{ businessForm.waterproofWidth }}</span>

                                <span class="guding-two-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                <span class="guding-two-zuoceW">{{ businessForm.leftWidth }}</span>
                                <span class="guding-two-zuoceH">{{ businessForm.leftHeight }}</span>
                                <span class="guding-two-zhengmianW">{{ businessForm.frontWidth }}</span>
                                <span class="guding-two-zhengmianH">{{ businessForm.frontHeight }}</span>
                                <span class="guding-two-youceW">{{ businessForm.rightWidth }}</span>
                                <span class="guding-two-youceH">{{ businessForm.rightHeight }}</span>
                                <span class="guding-two-xiaceW">{{ businessForm.bottomWidth }}</span>
                                <span class="guding-two-xiaceH">{{ businessForm.bottomHeight }}</span>
                            </div>

                            <!-- 固定-3 -->
                            <div v-show="optionModel == '固定-四周厚度+两个包柱'">
                                <span class="guding-three-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                <span class="guding-three-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                <span class="guding-three-zhengmianW">{{ businessForm.frontWidth }}</span>
                                <span class="guding-three-zhengmianH">{{ businessForm.frontHeight }}</span>
                                <span class="guding-three-zuoceH">{{ businessForm.leftHeight }}</span>
                                <span class="guding-three-zuoceW">{{ businessForm.leftWidth }}</span>
                                <span class="guding-three-youceW">{{ businessForm.rightWidth }}</span>
                                <span class="guding-three-youceH">{{ businessForm.rightHeight }}</span>
                                <span class="guding-three-xiadiH">{{ businessForm.bottomHeight }}</span>
                                <span class="guding-three-xiadiW">{{ businessForm.bottomWidth }}</span>
                                <span class="guding-three-menmeiW">{{ businessForm.doorWidth }}</span>
                                <span class="guding-three-menmeiH">{{ businessForm.doorHeight }}</span>
                                <span class="guding-three-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                <span class="guding-three-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                <span class="guding-three-baozhu2W">{{ businessForm.columnThreeWidth }}</span>
                                <span class="guding-three-baozhu2H">{{ businessForm.columnThreeHeight }}</span>
                            </div>

                            <!-- 多选-4 -->
                            <div v-if="optionModel == '多选-门头含包柱'">
                                <span class="duoxuan-four-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                <span class="duoxuan-four-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                <span class="duoxuan-four-zhengmianW">{{ businessForm.frontWidth }}</span>
                                <span class="duoxuan-four-zhengmianH">{{ businessForm.frontHeight }}</span>
                                <span class="duoxuan-four-zuoceH">{{ businessForm.leftHeight }}</span>
                                <span class="duoxuan-four-zuoceW">{{ businessForm.leftWidth }}</span>
                                <span class="duoxuan-four-youceW">{{ businessForm.rightWidth }}</span>
                                <span class="duoxuan-four-youceH">{{ businessForm.rightHeight }}</span>
                                <span class="duoxuan-four-xiadiH">{{ businessForm.bottomHeight }}</span>
                                <span class="duoxuan-four-xiadiW">{{ businessForm.bottomWidth }}</span>
                                <span class="duoxuan-four-menmeiW">{{ businessForm.doorWidth }}</span>
                                <span class="duoxuan-four-menmeiH">{{ businessForm.doorHeight }}</span>
                                <span class="duoxuan-four-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                <span class="duoxuan-four-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                <span class="duoxuan-four-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                <span class="duoxuan-four-baozhu2H">{{ businessForm.columnTwoHeight }}</span>
                            </div>

                            <!-- 多选-5 -->
                            <div v-else-if="optionModel == '多选-门头含橱窗'">
                                <span class="duoxuan-five-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                <span class="duoxuan-five-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                <span class="duoxuan-five-zhengmianW">{{ businessForm.frontWidth }}</span>
                                <span class="duoxuan-five-zhengmianH">{{ businessForm.frontHeight }}</span>
                                <span class="duoxuan-five-zuoceW">{{ businessForm.leftWidth }}</span>
                                <span class="duoxuan-five-zuoceH">{{ businessForm.leftHeight }}</span>
                                <span class="duoxuan-five-youceW">{{ businessForm.rightWidth }}</span>
                                <span class="duoxuan-five-youceH">{{ businessForm.rightHeight }}</span>
                                <span class="duoxuan-five-xiadiW">{{ businessForm.bottomWidth }}</span>
                                <span class="duoxuan-five-xiadiH">{{ businessForm.bottomHeight }}</span>
                                <span class="duoxuan-five-menmeiW">{{ businessForm.doorWidth }}</span>
                                <span class="duoxuan-five-menmeiH">{{ businessForm.doorHeight }}</span>
                                <span class="duoxuan-five-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                <span class="duoxuan-five-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                <span class="duoxuan-five-baozhu3W">{{ businessForm.columnThreeWidth }}</span>
                                <span class="duoxuan-five-baozhu3H">{{ businessForm.columnThreeHeight }}</span>
                                <span class="duoxuan-five-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                <span class="duoxuan-five-baozhu2H">{{ businessForm.columnTwoHeight }}</span>

                                <span class="duoxuan-five-chuchuangT-W">{{ businessForm.windowTopWidth }}</span>
                                <span class="duoxuan-five-chuchuangT-H">{{ businessForm.windowTopHeight }}</span>
                                <span class="duoxuan-five-chuchuangL-W">{{ businessForm.windowLeftWidth }}</span>
                                <span class="duoxuan-five-chuchuangL-H">{{ businessForm.windowLeftHeight }}</span>
                                <span class="duoxuan-five-chuchuangR-W">{{ businessForm.windowRightWidth }}</span>
                                <span class="duoxuan-five-chuchuangR-H">{{ businessForm.windowRightHeight }}</span>
                                <span class="duoxuan-five-chuchuangboli-W">{{ businessForm.windowWidth }}</span>
                                <span class="duoxuan-five-chuchuangboli-H">{{ businessForm.windowHeight }}</span>
                                <span class="duoxuan-five-chuchuangb-W">{{ businessForm.windowBottomWidth }}</span>
                                <span class="duoxuan-five-chuchuangb-H">{{ businessForm.windowBottomHeight }}</span>
                            </div>

                            <!-- 多选-6 -->
                            <div v-else-if="optionModel == '多选-多间门头'">
                                <span class="duoxuan-six-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                <span class="duoxuan-six-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                <span class="duoxuan-six-zuoceW">{{ businessForm.leftWidth }}</span>
                                <span class="duoxuan-six-zuoceH">{{ businessForm.leftHeight }}</span>
                                <span class="duoxuan-six-yuoceW">{{ businessForm.rightWidth }}</span>
                                <span class="duoxuan-six-yuoceH">{{ businessForm.rightHeight }}</span>
                                <span class="duoxuan-six-zhengmianW">{{ businessForm.frontWidth }}</span>
                                <span class="duoxuan-six-zhengmianH">{{ businessForm.frontHeight }}</span>
                                <span class="duoxuan-six-xiadiW">{{ businessForm.bottomWidth }}</span>
                                <span class="duoxuan-six-xiadiH">{{ businessForm.bottomHeight }}</span>
                                <span class="duoxuan-six-menmeiW">{{ businessForm.doorWidth }}</span>
                                <span class="duoxuan-six-menmeiH">{{ businessForm.doorHeight }}</span>
                                <span class="duoxuan-six-baozhu1W">{{ businessForm.columnOneWidth }}</span>
                                <span class="duoxuan-six-baozhu1H">{{ businessForm.columnOneHeight }}</span>
                                <span class="duoxuan-six-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                <span class="duoxuan-six-baozhu2H">{{ businessForm.columnTwoHeight }}</span>
                                <span class="duoxuan-six-baozhu3W">{{ businessForm.columnThreeWidth }}</span>
                                <span class="duoxuan-six-baozhu3H">{{ businessForm.columnThreeHeight }}</span>
                                <span class="duoxuan-six-baozhu4W">{{ businessForm.columnFourWidth }}</span>
                                <span class="duoxuan-six-baozhu4H">{{ businessForm.columnFourHeight }}</span>
                                <span class="duoxuan-six-baozhu5W">{{ businessForm.columnFiveWidth }}</span>
                                <span class="duoxuan-six-baozhu5H">{{ businessForm.columnFiveHeight }}</span>
                                <span class="duoxuan-six-baozhu6W">{{ businessForm.columnSixWidth }}</span>
                                <span class="duoxuan-six-baozhu6H">{{ businessForm.columnSixHeight }}</span>
                            </div>


                        </div>
                    </div>
                </div>

                <div class="materialList">
                    <h4>生动化数据</h4>
                    <div class="materialList-box" v-for="(v, index) in materialList" :key="index">
                        <div class="navBox">
                            <p class="indexHao">第{{ index + 1 }}项</p>
                            <p class="iconfontP iconfontPAdd"><i class="iconfont icon-zengjiatianjiajiahao"
                                    @click="addMaterial(v)"></i></p>
                            <p class="iconfontP iconfontPDelite" v-if="materialList.length > 1 || index !== 0"><i
                                    class="iconfont icon-shanchu3" @click="deleteMaterial(index)"
                                    v-show="materialList.length > 1 || index !== 0"></i></p>
                        </div>
                        <div class="materialList-input-box">
                            <el-form-item label="业务类型" prop="businessType">
                                <el-select v-model="v.businessType" placeholder="请选择业务类型" filterable>
                                    <el-option v-for="item in selectBusiness" :key="item.label" :label="item.label"
                                        :value="item.label" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="存货名称" prop="productId">
                                <el-select v-model="v.productId" placeholder="请选择存货名称" filterable
                                    @change="productChange($event, index)">
                                    <el-option v-for="item in stocksData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单位与数量" prop="totalQuantity" class="config">
                                <el-input v-model="v.totalQuantity" placeholder="请输入单位与数量" />
                                <p class="unit">{{ v.unit || '待定' }}</p>
                            </el-form-item>
                            <el-form-item label="长度" prop="materialHeight" class="config">
                                <el-input v-model="v.materialHeight" placeholder="请输入长度" />
                                <p class="unit">m</p>
                            </el-form-item>
                            <el-form-item label="宽度" prop="materialWidth" class="config">
                                <el-input v-model="v.materialWidth" placeholder="请输入宽度" />
                                <p class="unit">m</p>
                            </el-form-item>
                            <el-form-item label="件数" prop="quantityPerPiece">
                                <el-input v-model="v.quantityPerPiece" placeholder="请输入件数" />
                            </el-form-item>
                            <el-form-item label="设计元素" prop="materialDesignElements" class="materialDesignElements">
                                <el-input v-model="v.materialDesignElements" placeholder="请输入设计元素" />
                            </el-form-item>
                            <el-form-item label="备注" prop="materialRemark" class="materialRemark">
                                <el-input v-model="v.materialRemark" placeholder="请输入备注" />
                            </el-form-item>
                        </div>
                    </div>
                </div>

                <div class="materialImage">
                    <h4>生动化图片补充</h4>
                    <el-image :src="materialImage" v-if="materialImage"></el-image>
                    <div class="notImage" v-else>
                        暂无图片
                    </div>
                </div>
                <el-form-item class="btn-box">
                    <el-button @click="resetForm(ruleFormRef)" style="background:#F2F3F5">重置</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                        v-show="checkPermi(['system:measurement:edit'])">
                        {{ callbackFlag ? '修改' : '提交' }}
                    </el-button>
                </el-form-item>
            </div>

        </el-form>
    </div>
    <selectUser ref="selectRef" @userOneInfo="userOneInfo" />
</template>

<script setup>
import { addMeasurement, editMeasurement } from '@/api/costSum'
import { listTeams } from '@/api/teams'
import {  getWorkApi } from '@/api/tickets'
import { ElMessage } from 'element-plus'
import { defineEmits } from 'vue'
import { getproductsApi } from '@/api/tickets'
import { checkPermi } from "@/utils/permission.js";
import selectUser from "@/components/allUserInfo/index";

const selectRef = ref(null)

const emit = defineEmits(['goBack', 'clearMeasurement'])

const props = defineProps(['measurement'])
let ruleFormRef = ref(null)
let stocksData = ref([])
// 控制提交修改
let callbackFlag = ref(false)
let optionModelData = ref(true)
// 模板名称 modelName
let optionModel = ref('固定-单片')
let optionModelUrl = ref(new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href)
let optionModelList = reactive([
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href,
        imageName: '固定-单片',
        id: '固定-单片'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href,
        imageName: '固定-四周厚度无包柱',
        id: '固定-四周厚度无包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href,
        imageName: '固定-四周厚度+两个包柱',
        id: '固定-四周厚度+两个包柱'
    },

    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-门头含包柱',
        id: '多选-门头含包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href,
        imageName: '多选-门头含橱窗',
        id: '多选-门头含橱窗'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-多间门头',
        id: '多选-多间门头'
    },
])
let selectBusiness = ref([
    {
        label: '物料类',
        index: 0
    },
    {
        label: '门头',
        index: 1
    },
    {
        label: '装修类',
        index: 2
    },
    {
        label: '活动类',
        index: 3
    },
    {
        label: '其他',
        index: 4
    },
])
let businessInstallerOptions = ref([])
// 生动化数据
const materialList = ref([{
    businessType: '',
    totalQuantity: '',
    materialHeight: '',
    materialWidth: '',
    quantityPerPiece: '',
    materialDesignElements: '',
    materialRemark: '',
    unit: '',
}])
// 生动化图片
let materialImage = ref('')
let businessForm = reactive({
    terminalName: '',
    customerName: '',
    customerId: '',
    manufacturerContact: '',
    businessSurveyor: '',
    businessSurveyorName: '',
    surveyDate: '',
    designElements: '',
    installer: '',
    terminalName: '',
    terminalPhone: '',
    urbanManagementReport: '',
    detailedAddress: '',
    mainLineDistance: '',
    mtype: '',
    shopEnvironment: '',
    shopRadio: "1",
    other: '',


    waterproofHeight: '',
    waterproofWidth: '',
    leftHeight: '',
    leftWidth: '',
    windowHeight: '',
    windowWidth: '',
    windowTopWidth: '',
    windowTopHeight: '',
    windowLeftWidth: '',
    windowLeftHeight: '',
    windowRightWidth: '',
    windowRightHeight: '',
    windowBottomWidth: '',
    windowBottomHeight: '',
    rightHeight: '',
    rightWidth: '',
    frontHeight: '',
    frontWidth: '',
    bottomHeight: '',
    bottomWidth: '',
    doorHeight: '',
    doorWidth: '',
    columnOneHeight: '',
    columnOneWidth: '',
    columnTwoHeight: '',
    columnTwoWidth: '',
    columnThreeHeight: '',
    columnThreeWidth: '',
    columnFourHeight: '',
    columnFourWidth: '',
    columnFiveHeight: '',
    columnFiveWidth: '',
    columnSixHeight: '',
    columnSixWidth: '',
})
let modleListName = ['waterproofHeight', 'windowTopWidth', 'windowTopHeight', 'windowLeftWidth', 'windowLeftHeight', 'windowRightWidth', 'windowRightHeight', 'windowBottomWidth', 'windowBottomHeight', 'waterproofWidth', 'windowHeight', 'windowWidth', 'leftHeight', 'leftWidth', 'windowTopDistance', 'frontHeight', 'frontWidth', 'bottomHeight',
    'windowBottomDistance', 'rightHeight', 'rightWidth', 'windowLeftDistance', 'windowRightDistance', 'bottomWidth', 'doorHeight', 'doorWidth', 'columnOneHeight', 'columnOneWidth', 'columnTwoHeight',
    'columnTwoWidth', 'columnThreeHeight', 'columnThreeWidth', 'columnFourHeight', 'columnFourWidth', 'columnFiveHeight', 'columnFiveWidth', 'columnSixHeight', 'columnSixWidth']
const rules = reactive({
    terminalPhone: {
        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
    },
    terminalName: [
        {
            required: true,
            message: '终端名称',
            trigger: 'change',
        }
    ],
    customerName: [
        {
            required: true,
            message: '客户名称',
            trigger: 'change',
        }
    ],
    manufacturerContact: [
        {
            required: true,
            message: '厂家负责人',
            trigger: 'change',
        }
    ],
    businessSurveyor: [
        {
            required: true,
            message: '经营测量人员',
            trigger: 'change',
        }
    ],
    surveyDate: [
        {
            required: true,
            message: '测量日期',
            trigger: 'change',
        }
    ],

    designElements: [
        {
            required: true,
            message: '设计元素',
            trigger: 'change',
        }
    ],
    terminalName: [
        {
            required: true,
            message: '终端名称',
            trigger: 'change',
        }
    ],
    terminalPhone: [
        {
            required: true,
            message: '终端电话',
            trigger: 'change',
        }
    ],
    mtype: [
        {
            required: true,
            message: '下单类别',
            trigger: 'change',
        }
    ],

})

let urbanManagementReportList = reactive([
    {
        label: '报备',
        value: '报备'
    },
    {
        label: '未报备',
        value: '未报备'
    },
    {
        label: '无需报备',
        value: '无需报备'
    },
    {
        label: '其他',
        value: '其他'
    },
])
const productChange = (v, index) => {
    stocksData.value.forEach((e, i) => {
        if (e.value == v) {
            materialList.value[index].unit = e.unit
        }
    })
}
let customerList = reactive([

])

const customerChange = (e) => {
    businessForm.customerId = e
    let customerObj = customerList.find(v => e == v.value)
    businessForm.customerName = customerObj.label
}



// 获取人员信息
const userOneInfo = (v) => {
    businessForm.businessSurveyor = String(v.userIds)
    businessForm.businessSurveyorName = v.nickName
}
/** 打开授权用户表弹窗 */
const openSelectUser = () => {
    selectRef.value.show();
}


// 获取存货下拉菜单数据
const getproductsApiData = async (v = '') => {
    let params = { deptName: v }
    let res = await getproductsApi(params)
    let { code, data } = res
    if (code == 200) {
        stocksData.value = data.map(v => {
            return {
                lable: v.productId,
                value: v.productName,
                unit: v.unit
            }
        })
    }
}
watch(() => optionModel.value, (val) => {
    switch (val) {
        case '固定-单片':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href
            if (optionModelData.value) {
                for (let index = 0; index < modleListName.length; index++) {
                    businessForm[modleListName[index]] = ''
                }
            }
            break;
        case '固定-四周厚度无包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href
            if (optionModelData.value) {
                for (let index = 0; index < modleListName.length; index++) {
                    businessForm[modleListName[index]] = ''
                }
            }
            break;
        case '固定-四周厚度+两个包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href
            if (optionModelData.value) {
                for (let index = 0; index < modleListName.length; index++) {
                    businessForm[modleListName[index]] = ''
                }
            }
            break;
        case '多选-门头含包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href
            if (optionModelData.value) {
                for (let index = 0; index < modleListName.length; index++) {
                    businessForm[modleListName[index]] = ''
                }
            }
            break;
        case '多选-门头含橱窗':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href
            if (optionModelData.value) {
                for (let index = 0; index < modleListName.length; index++) {
                    businessForm[modleListName[index]] = ''
                }
            }
            break;
        case '多选-多间门头':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href
            if (optionModelData.value) {
                for (let index = 0; index < modleListName.length; index++) {
                    businessForm[modleListName[index]] = ''
                }
            }
            break;
        default:
            break;
    }
})
// 返回
const goBack = () => {
    emit('goBack')
}
const addMeasurementFn = async (params) => {
    params.type = optionModel.value
    let { code, msg } = await addMeasurement(params)
    if (code == 200) {
        ElMessage({
            message: msg,
            type: 'success',
        })
        setTimeout(() => {
            goBack()
        }, 500)
    } else {

    }
}
// 修改
const editMeasurementFn = async (params) => {
    params.type = optionModel.value
    let { code, msg } = await editMeasurement(params)
    if (code == 200) {
        ElMessage({
            message: msg,
            type: 'success',
        })
        setTimeout(() => {
            goBack()
        }, 500)
    } else {

    }
}
// 提交
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let materialListJsonData = JSON.stringify(materialList.value)
            businessForm.materialList = materialListJsonData
            if (callbackFlag.value) {
                // 修改
                editMeasurementFn(businessForm)
            } else {
                // 新增
                addMeasurementFn(businessForm)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
    let params = { customerName: v }
    let { code, data } = await getWorkApi(params)
    if (code == 200) {
        data.forEach(v => {
            customerList.push({
                label: v.primaryClassification + '/' + v.customerName,
                value: v.customerId
            })
        });
    }
}
// 查询安装队数据
const listTeamsFn = async () => {
    let data = {
        pageNum: 1,
        pageSize: 100000
    }
    let res = await listTeams(data)
    let { code, rows } = res
    if (code == 200) {
        rows.forEach(v => {
            businessInstallerOptions.value.push({
                label: v.constructionTeamName,
                value: v.constructionTeamId
            })
        });
    }
}

// 重置 
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
// 回显核算数据
const callbackFn = () => {

    for (const key in businessForm) {
        businessForm[key] = props.measurement[key]
    }
    businessForm.id = props.measurement.id
    businessForm.businessSurveyor = JSON.parse(props.measurement.businessSurveyor) || null
    materialList.value = JSON.parse(props.measurement.materialList)
    callbackFlag.value = true
    optionModelData.value = false
    optionModel.value = props.measurement.type
    emit('clearMeasurement')
}



const addMaterial = (v) => {
    materialList.value.push({
        businessType: '',
        totalQuantity: '',
        materialHeight: '',
        materialWidth: '',
        quantityPerPiece: '',
        materialDesignElements: '',
        materialRemark: '',
    })
}

const deleteMaterial = (i) => {
    materialList.value.splice(i, 1)
}


onMounted(() => {
    getWorkApiData()
    listTeamsFn()
    getproductsApiData()

    if (props.measurement) {
        callbackFn()
    }
})
</script>

<style scoped lang="scss">
.business {
    padding: 20px;
    box-sizing: border-box;
    background-color: #F7F8FA;

    :deep(.el-form) {
        width: 100%;
        max-width: 100% !important;

        .el-input__wrapper,.el-textarea__inner {
            background: #F2F3F5;
            box-shadow: none;
        }

        .el-input__inner {
            color: #000;
        }

        .el-form-item {
            display: flex;
            flex-direction: column;
        }

        .config {
            .el-form-item__content {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;

                .el-input {
                    width: 87%;
                }

                .unit {
                    background-color: #F2F3F5;
                    width: 24%;
                    text-align: center;
                }

                .el-input__wrapper {
                    border-radius: 0px;
                    border-right: 1px solid #dbdbdb;
                }
            }
        }

        .business-form {
            background-color: #fff;
            padding: 20px;

            h4 {
                padding-bottom: 20px;
                font-weight: 550;

                .iconfont {
                    border-radius: 50%;
                    padding: 5px;
                    transition: all .3s;

                    &:hover {
                        background-color: #1947FF;
                        color: #fff;
                    }
                }
            }

            .form-box {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                .shopRadio {
                    flex-direction: none;

                    .el-form-item__content {
                        margin: 0 !important;
                    }
                }

                .el-form-item {
                    margin-right: 40px;
                    width: 342px;

                    .el-form-item__label-wrap {
                        margin: 0 !important;
                    }


                    .el-form-item__content {
                        width: 100%;

                        .el-select,
                        .el-input {
                            width: 100%;
                        }
                    }
                }

                .is-disabled {
                    .el-input__wrapper {
                        color: #eeeeee;
                    }
                }



                .shopEnvironment {
                    .el-form-item__content {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;

                        .shopEnvironmentLable {
                            background-color: #F2F3F5;
                            width: 32%;
                            text-align: center;
                        }

                        .el-input {
                            width: 55%;
                        }

                        .unit {
                            background-color: #F2F3F5;
                            width: 13%;
                            text-align: center;
                        }

                        .el-input__wrapper {
                            border-radius: 0px;
                            border-left: 1px solid #dbdbdb;
                            border-right: 1px solid #dbdbdb;
                        }
                    }
                }

                .terminalPhone {
                    .el-form-item__content {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;

                        .el-input {
                            width: 87%;
                        }

                        p {
                            background-color: #F2F3F5;
                            width: 13%;
                            text-align: center;
                        }

                        .el-input__wrapper {
                            border-radius: 0px;
                            border-left: 1px solid #dbdbdb;
                        }
                    }
                }


            }

        }

        .structuralDiagram {
            background-color: #fff;
            padding: 20px;
            margin-top: 16px;

            .title {
                padding-bottom: 20px;
                display: flex;
                align-items: center;

                h4 {
                    font-weight: 550;
                    margin-right: 10px;
                }

                span {
                    color: #ccc;
                }
            }

            .form-box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .el-form-item {
                    margin-right: 40px;
                    width: 164px;

                    .el-form-item__label-wrap {
                        margin: 0 !important;
                    }

                    .el-input__wrapper {
                        background: #F2F3F5;
                    }

                    .el-form-item__content {
                        width: 100%;

                        .el-input {
                            width: 72%;
                        }

                        .unit {
                            width: 28%;
                        }
                    }
                }
            }
        }

        .optionModel {
            .el-form-item {
                width: 100% !important;
            }

            .el-form-item__content,
            .el-select,
            .el-input {
                width: 100% !important;
            }

            .el-form-item__label-wrap {
                margin: 0 !important;
            }

            .modleimage {
                width: 40%;
                height: 40%;
                margin: 0 auto;
                position: relative;

                .el-image {
                    width: 100%;
                    height: 100%;
                }

                span {
                    position: absolute;
                    font-size: 12px;
                    color: red;
                    font-weight: 550;
                }

                .guding-one-zhengmianW {
                    top: 9%;
                    left: 47%;
                }

                .guding-one-zhengmianH {
                    left: 1%;
                    bottom: 52%;
                }

                .guding-two-fangshuiW {
                    left: 49%;
                    top: 0%;
                }

                .guding-two-fangshuiH {
                    left: 14%;
                    bottom: 78%;
                }

                .guding-two-zuoceW {
                    left: 11%;
                    bottom: 71%;
                }

                .guding-two-zuoceH {
                    left: 6%;
                    bottom: 47%;
                }

                .guding-two-zhengmianW {
                    left: 49%;
                    bottom: 70%;
                }

                .guding-two-zhengmianH {
                    left: 15%;
                    bottom: 49%;
                }

                .guding-two-youceW {
                    left: 87%;
                    bottom: 72%;

                }

                .guding-two-youceH {
                    left: 92%;
                    bottom: 47%;
                }

                .guding-two-xiaceW {
                    left: 49%;
                    bottom: 31%;
                }

                .guding-two-xiaceH {
                    left: 17%;
                    bottom: 20%;
                }


                .guding-three-fangshuiW {
                    left: 50%;
                    bottom: 91%;
                }

                .guding-three-fangshuiH {
                    left: 13%;
                    bottom: 86%;
                }

                .guding-three-zhengmianW {
                    left: 50%;
                    bottom: 82%;
                }

                .guding-three-zhengmianH {
                    left: 14%;
                    bottom: 72%;
                }

                .guding-three-zuoceH {
                    left: 4%;
                    bottom: 72%;
                }

                .guding-three-zuoceW {
                    left: 9%;
                    bottom: 62%;
                }

                .guding-three-youceW {
                    left: 90%;
                    bottom: 62%;
                }

                .guding-three-youceH {
                    left: 94%;
                    bottom: 71%;
                }

                .guding-three-xiadiH {
                    left: 16%;
                    bottom: 58%;
                }

                .guding-three-xiadiW {
                    left: 50%;
                    bottom: 64%;
                }

                .guding-three-menmeiW {
                    left: 50%;
                    bottom: 48%;
                }

                .guding-three-menmeiH {
                    left: 18%;
                    bottom: 53%;
                }

                .guding-three-baozhuH {
                    left: 18%;
                    bottom: 30%;
                }

                .guding-three-baozhuW {
                    left: 22%;
                    bottom: 8%;
                }

                .guding-three-baozhu2W {
                    left: 77%;
                    bottom: 8%;
                }

                .guding-three-baozhu2H {
                    left: 82%;
                    bottom: 29%;
                }

                // 多选样式
                .duoxuan-four-fangshuiW {
                    left: 48%;
                    bottom: 89%;
                }

                .duoxuan-four-fangshuiH {
                    left: 10%;
                    bottom: 85%;
                }

                .duoxuan-four-zhengmianW {
                    left: 48%;
                    bottom: 76%;
                }

                .duoxuan-four-zhengmianH {
                    left: 18%;
                    bottom: 71%;
                }

                .duoxuan-four-zuoceH {
                    left: 2%;
                    bottom: 71%;
                }

                .duoxuan-four-zuoceW {
                    left: 8%;
                    bottom: 60%;
                }

                .duoxuan-four-youceW {
                    left: 87%;
                    bottom: 60%;
                }

                .duoxuan-four-youceH {
                    left: 94%;
                    bottom: 70%;
                }

                .duoxuan-four-xiadiH {
                    left: 14%;
                    bottom: 56%;
                }

                .duoxuan-four-xiadiW {
                    left: 43%;
                    bottom: 59%;
                }

                .duoxuan-four-menmeiW {
                    left: 49%;
                    bottom: 47%;
                }

                .duoxuan-four-menmeiH {
                    left: 16%;
                    bottom: 52%;
                }

                .duoxuan-four-baozhuH {
                    left: 15%;
                    bottom: 29%;
                }

                .duoxuan-four-baozhuW {
                    left: 21%;
                    bottom: 5%;
                }

                .duoxuan-four-baozhu2W {
                    left: 75%;
                    bottom: 6%;
                }

                .duoxuan-four-baozhu2H {
                    left: 81%;
                    bottom: 27%;
                }

                // 多选五
                .duoxuan-five-fangshuiW {
                    left: 50%;
                    bottom: 91%;
                }

                .duoxuan-five-fangshuiH {
                    left: 12%;
                    bottom: 85%;
                }

                .duoxuan-five-zhengmianW {
                    left: 48%;
                    bottom: 76%;
                }

                .duoxuan-five-zhengmianH {
                    left: 19%;
                    bottom: 71%;
                }

                .duoxuan-five-zuoceH {
                    left: 4%;
                    bottom: 71%;
                }

                .duoxuan-five-zuoceW {
                    left: 10%;
                    bottom: 61%;
                }

                .duoxuan-five-youceW {
                    left: 89%;
                    bottom: 61%;
                }

                .duoxuan-five-youceH {
                    left: 95%;
                    bottom: 71%;
                }

                .duoxuan-five-xiadiH {
                    left: 16%;
                    bottom: 56%;

                }

                .duoxuan-five-xiadiW {
                    left: 43%;
                    bottom: 59%;
                }

                .duoxuan-five-menmeiW {
                    left: 57%;
                    bottom: 52%;
                }

                .duoxuan-five-menmeiH {
                    left: 18%;
                    bottom: 52%;
                }

                .duoxuan-five-baozhuH {
                    left: 15%;
                    bottom: 29%;
                }

                .duoxuan-five-baozhuW {
                    left: 21%;
                    bottom: 6%;
                }

                .duoxuan-five-baozhu3W {
                    left: 77%;
                    bottom: 6%;
                }

                .duoxuan-five-baozhu3H {
                    left: 83%;
                    bottom: 29%;
                }

                .duoxuan-five-baozhu2H {
                    left: 57%;
                    bottom: 29%;
                }

                .duoxuan-five-baozhu2W {
                    left: 51%;
                    bottom: 7%;
                }

                .duoxuan-five-chuchuangT-W {
                    left: 41%;
                    bottom: 47%;
                }

                .duoxuan-five-chuchuangT-H {
                    left: 27%;
                    bottom: 47%;
                }

                .duoxuan-five-chuchuangL-W {
                    left: 26%;
                    bottom: 42%;
                }

                .duoxuan-five-chuchuangL-H {
                    left: 25%;
                    bottom: 31%;
                }

                .duoxuan-five-chuchuangR-W {
                    left: 47%;
                    bottom: 42%;
                }

                .duoxuan-five-chuchuangR-H {
                    left: 47%;
                    bottom: 31%;
                }

                .duoxuan-five-chuchuangboli-W {
                    left: 36%;
                    bottom: 19%;
                }

                .duoxuan-five-chuchuangboli-H {
                    left: 41%;
                    bottom: 31%;
                }

                .duoxuan-five-chuchuangb-W {
                    left: 36%;
                    bottom: 12%;
                }

                .duoxuan-five-chuchuangb-H {
                    left: 27%;
                    bottom: 13%;
                }

                // 多选-6
                .duoxuan-six-fangshuiW {
                    left: 50%;
                    bottom: 91%;
                }

                .duoxuan-six-fangshuiH {
                    left: 12%;
                    bottom: 86%;
                }

                .duoxuan-six-zuoceW {
                    left: 9%;
                    bottom: 63%;
                }

                .duoxuan-six-zuoceH {
                    left: 3%;
                    bottom: 73%;
                }

                .duoxuan-six-yuoceW {
                    left: 90%;
                    bottom: 63%;
                }

                .duoxuan-six-yuoceH {
                    left: 96%;
                    bottom: 73%;
                }

                .duoxuan-six-zhengmianW {
                    left: 49%;
                    bottom: 78%;
                }

                .duoxuan-six-zhengmianH {
                    left: 19%;
                    bottom: 73%;
                }

                .duoxuan-six-xiadiW {
                    left: 45%;
                    bottom: 60%;
                }

                .duoxuan-six-xiadiH {
                    left: 13%;
                    bottom: 59%;
                }

                .duoxuan-six-menmeiW {
                    left: 36%;
                    bottom: 54%;
                }

                .duoxuan-six-menmeiH {
                    left: 15%;
                    bottom: 54%;
                }

                .duoxuan-six-baozhu1W {
                    left: 19%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu1H {
                    left: 13%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu2W {
                    left: 31%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu2H {
                    left: 26%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu3W {
                    left: 42%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu3H {
                    left: 37%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu4W {
                    left: 54%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu4H {
                    left: 49%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu5W {
                    left: 68%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu5H {
                    left: 63%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu6W {
                    left: 79%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu6H {
                    left: 83%;
                    bottom: 30%;
                }
            }
        }



        .materialList {
            background-color: #fff;
            padding: 20px;
            margin-top: 20px;

            h4 {
                padding-bottom: 20px;
                font-weight: 550;
            }

            .el-form-item__label-wrap {
                margin: 0 !important;
            }

            .el-textarea__inner {
                background-color: #F2F3F5;
                min-height: 120px !important;
            }

            .materialList-box {

                .navBox {
                    border-top: 1px solid #E5E6EB;
                    position: relative;
                    margin: 30px 0;

                    .indexHao {
                        height: 20px;
                        width: 80px;
                        background-color: #fff;
                        position: absolute;
                        text-align: center;
                        top: -10px;
                        left: 50px;
                        font-weight: 550;
                    }

                    .iconfontP {
                        background-color: #fff;
                        text-align: center;
                        width: 80px;
                        position: absolute;
                        height: 20px;

                    }

                    .iconfontPAdd {
                        top: -12px;
                        right: 150px;
                        color: #165DFF;
                    }

                    .iconfontPDelite {
                        top: -12px;
                        right: 50px;
                        color: #F53F3F;
                    }

                    .icon-shanchu3 {
                        font-weight: 600;
                    }

                    .iconfont {
                        font-size: 24px;

                    }
                }

                .materialList-input-box {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                    gap: 0px 20px;

                    .materialDesignElements {
                        grid-column-start: 2;
                        grid-column-end: 4;
                    }

                    .materialRemark {
                        grid-column-start: 4;
                        grid-column-end: 6;
                    }
                }
            }
        }

        .materialImage {
            background-color: #FFFFFF;
            padding: 20px;
            margin-top: 20px;

            h4 {
                padding-bottom: 20px;
                font-weight: 550;
            }

            .notImage {
                padding: 80px;
                color: #333;
                background-color: #ccc;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        .btn-box {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            padding-right: 40px;
            background-color: #FFFFFF;
            box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.10);
            height: 60px;
        }
    }
}
</style>